import { Map, TileLayer, VectorLayer, LineString, Marker } from 'maptalks'
import { point, polygon, booleanPointInPolygon } from "@turf/turf";
import { interpolate } from './rewrite/turfinterpolate';

let map = new Map('map', {

  zoom: 5,
  center: [114, 30],
  baseLayer: new TileLayer('base', {
    urlTemplate: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
  })
})

var pt = point([-81, 41]);
var poly = polygon([[
  [-81, 41],
  [-81, 47],
  [-72, 47],
  [-72, 41],
  [-81, 41]
]]);

alert(booleanPointInPolygon(pt, poly))


let imgLayer = new VectorLayer('img').addTo(map)

// let lineLayer = new VectorLayer('line', lineData).addTo(map)
// lineLayer.getFirstGeometry().animate()
// let line = new LineString([[120, 30], [120, 32]])
// line.animateShow({}, (frame) => {
//   frame.styles
// })

const addImageMarker = function (lon, lat, offX, offY, text, imagePath, layer, mouseDownEvent, mouseupEvent) {
  const imageMarker = new Marker([lon, lat], {
    properties: {
      tip: text,
      textDx: -offX,
      textDy: -offY
    },
    symbol: {
      markerFile: imagePath,
      markerDx: -offX,
      markerDy: -offY,
      markerHorizontalAlignment: 'right',
      markerVerticalAlignment: 'bottom'
      // markerRotation: rotation
    }
  })

  imageMarker.addTo(layer)

  // 为要素添加tip弹出关闭事件
  // imageMarker.removeEventListener('mousedown', mouseDownEvent)
  // imageMarker.addEventListener('mousedown', mouseDownEvent)
  // imageMarker.removeEventListener('mouseup', mouseupEvent)
  // imageMarker.addEventListener('mouseup', mouseupEvent)
}


const addImageMarker_Rotate = function (imgUrl, deg, callback, callbackParams) {
  // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
  var Img = new Image()
  // Img
  Img.setAttribute('crossOrigin', 'Anonymous')
  var dataURL = ''
  Img.src = imgUrl
  Img.onload = function (e) { // 要先确保图片完整获取到，这是个异步事件
    const img = e.currentTarget
    var canvas = document.createElement('canvas') // 创建canvas元素
    var ctx = canvas.getContext('2d')
    // 确保canvas的尺寸和图片一样
    const width = img.width
    const height = img.height
    const r = Math.sqrt(width * width + height * height) / 2
    var w1 = width / 2
    var h1 = height / 2
    canvas.setAttribute('width', 2 * r)
    canvas.setAttribute('height', 2 * r)
    ctx.translate(r, r) // 1
    ctx.rotate(deg * Math.PI / 180) // 2
    ctx.translate(-r, -r) // 1
    ctx.drawImage(img, r - w1, r - h1)
    dataURL = canvas.toDataURL() // 转换图片为dataURL（转换成base64）
    const offX = callbackParams.offX + (r - w1)
    const offY = callbackParams.offY + (r - h1)
    callback(callbackParams.lon, callbackParams.lat, offX, offY, callbackParams.text, dataURL, callbackParams.layer, callbackParams.mouseDownEvent, callbackParams.mouseupEvent)
  }


  return dataURL
}

addImageMarker_Rotate('./public/n.png', 45, addImageMarker, {
  lon: 120,
  lat: 30,
  offX: 0,
  offY: 0,
  text: 'text',
  layer: imgLayer,
  mouseDownEvent: null,
  mouseupEvent: null
})

setTimeout(() => {
  imgLayer.forEach(marker => {
    marker.updateSymbol({
      markerWidth: 60,
      markerHeight: 20,
    })
  });

}, 100);


